<template>
    <div class="quick-nav">
      <img src="../../assets/img/icon/book.png" alt="" class="monster">

        <div class="alert">
          <p style="font-weight: bold" >公告</p>
          <hr>
          <span class="announce"><el-link  :underline="false" type="danger">[公告]&nbsp; 免费阅读功能上线</el-link></span><br>
          <el-divider></el-divider>
          <span class="announce"><el-link :underline="false" type="info">[公告]&nbsp; 阅读功能升级</el-link></span><br>
          <el-divider></el-divider>
          <span class="announce"><el-link :underline="false" type="info">[公告]&nbsp; 笔记功能上线</el-link></span><br>
          <el-divider></el-divider>
          <span class="announce"><el-link :underline="false" type="info">[公告]&nbsp; 图书阅读功能上线</el-link></span><br>
<el-divider></el-divider>
          <span class="announce"><el-link :underline="false" type="info">[公告]&nbsp; 主页重新设计</el-link></span><br>
          <el-divider></el-divider>
        </div>

      <img src="../../assets/img/icon/img.png" alt="" class="spark">
      <img src="../../assets/img/icon/logo.jpeg" alt="" class="logo">

    </div>
</template>

<script>
  export default {
    name: 'QuickNav'
  }
</script>

<style scoped>
  .quick-nav {
    width: 303px;
    height: 318px;
    background-color: transparent;
  }

  .monster {
    width: 300px;
    height: 100px;
    /*position: absolute;*/
    top: -50px;
    /*left: 700px;*/
  }

  .alert {
    width: 200px;
    height: 285px;
    position: absolute;
    margin-left: 50%;
    top: 290px;
    left: 250px;
  }

  .spark {
    width: 100px;
    height: 90px;
    position: absolute;
    margin-left: 50%;
    top: 100px;
    left: 20px;
  }

  .logo {
    width: 280px;
    position: absolute;
    margin-left: 50%;
    top:100px;
    left: 210px;
  }

  .announce {
    line-height: 30px;
    float: left;
    margin: 4px;
    letter-spacing:2px;
  }

  .el-divider{
    margin: 10px;

  }

</style>
